<template>
  <div class="myTeam page" ref="webview">
    <van-nav-bar title="我的团队" class="bg_white" left-arrow @click-left="$router.push({'path': '/my'})" />
    <van-search v-model="memberNo" show-action :class="{'focus': isFocus}" placeholder="Search" @focus="isFocus=true" @blur="isFocus=false" @search="onSearch">
      <div slot="action" class="search-btn" @click="onSearch">搜索</div>
    </van-search>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="nodata" v-if="dataList.length===0" style="height:200px;">
          <span>暂无订单</span>
        </div>
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>24?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-else>
          <div class="table-box">
            <table class="table">
              <tr>
                <th width="20">序号</th>
                <th>会员编号</th>
                <th>昵称</th>
                <th>级别</th>
                <th>市场位置</th>
                <th>操作</th>
              </tr>
              <template v-for="(item,index) in dataList">
                <tr :key="index">
                  <td>0{{index+1}}</td>
                  <td>{{item.member_no}}</td>
                  <td>{{item.nickname}}</td>
                  <td>{{item.level_name}}</td>
                  <!-- <td>{{item.level_name}}</td> -->
                  <td>{{item.the_area}}</td>
                  <td>
                    <span class="activation" v-if="!item.status" @click="activeMember(item)">激活</span>
                    <span class="del" @click="delMember(item)">删除</span>
                  </td>
                </tr>
              </template>
            </table>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="submiBtn">
      <van-button class="btn" round :loading="isLoading " @click.native="$router.push({'path': '/my/register'})">注册新会员</van-button>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
import { setTimeout } from 'timers';
export default {
  name: 'myTeam',
  mixins: [mixins],
  data () {
    return {
      searchValue: '',
      isFocus: false,
      isLoading: false,
      memberNo: '',
      apiType: 'user',
      apiUrl: 'myTeam'
    };
  },
  created () {
    this.limit = 26;
    this.getList('myTeam', true);
  },
  methods: {
    onSearch () {
      this.params.memberNo = this.memberNo;
      this.getList('myTeam', true);
    },
    // 删除会员
    delMember (item) {
      if (item.status) {
        this.$toast('当前会员已激活不能删除!');
        return;
      }
      this.$dialog.confirm({
        title: '温馨提醒',
        message: '你确定要删除会员吗',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, done) => {
          if (action === 'confirm') {
            setTimeout(done, 1000);
            this.$API.user.memDel({ id: item.id }).then(res => {
              if (!res.code) {
                setTimeout(() => {
                  done();
                  this.$toast('删除成功');
                  this.getList('myTeam', true);
                }, 1000);
              } else {
                this.$toast(res.message);
              }
            });
          } else {
            done();
          }
        }
      });
    },
    // 激活会员
    activeMember (item) {
      this.$toast.loading({ duration: 0 });
      this.$API.user.activeMember({ id: item.id }).then(res => {
        if (!res.code) {
          this.getList('myTeam', true);
          setTimeout(() => {
            this.$toast('激活成功');
          }, 400);
        } else {
          setTimeout(() => {
            this.$toast(res.message);
          }, 400);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.myTeam {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .submiBtn {
    margin: 20px 30px;
    .btn {
      background-color: #fff;
      width: 100%;
      height: 100px;
      line-height: 100px;
      border: none;
      .van-button__text {
        color: #125dff;
        font-size: 34px;
      }
    }
  }
  .table-box {
    margin: 0 20px;
  }
  .table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    margin-top: 10px;
    td {
      border: 1px solid #007aff;
      text-align: center;
      padding: 10px 15px;
      font-size: 24px;
      .activation {
        color: #125dff;
        text-align: center;
        margin-right: 10px;
      }
      .del {
        color: red;
      }
    }
    th {
      padding: 15px 0;
      color: #007aff;
      font-size: 24px;
    }
    .activation {
      color: #007aff;
    }
  }
  .content {
    flex: 1;
    background-color: #f5f5f5;
    position: relative;
    overflow-y: auto;
  }
  .search-btn {
    padding: 0 20px;
    display: block;
    color: #007aff;
  }
}
</style>
